<template>
  <Lock v-if="isLocked" @unlock="unlockFunc"/>
  <div v-else class="common-layout">
    <el-container class="el-container">
      <el-aside :width="asideWidth" class="left-menu" :style="{ 'background-color': themeColor }">
        <LeftMenu/>
      </el-aside>
      <el-container>
        <el-header :style="{ 'background-color': themeColor }">
          <Header/>
        </el-header>
        <el-main :class="{ 'dark-back': darkTheme, 'light-back': !darkTheme }" style="padding: 0">
          <Main v-if="currentSession.role_id !== 0"/>
          <Welcome v-if="currentSession.role_id === 0"/>
        </el-main>
        <el-footer :style="{ 'background-color': themeColor }">
          <Footer/>
          <div class="floating-button-container" :style="{ color: themeFontColor }">
            深色模式：
            <el-switch v-model="darkTheme" @change="toggleTheme"/>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" name="Home" setup>
import LeftMenu from "@/layout/LeftMenu.vue";
import Header from "@/layout/Header.vue";
import Footer from "@/layout/Footer.vue";
import Main from "@/layout/Main.vue";
import Welcome from "@/views/Welcome.vue";
import Lock from "@/views/Lock.vue";
import {ref, computed, onMounted, onUnmounted, watch} from "vue";
import {useStore} from "vuex";

const store = useStore();
const isLocked = ref(store.state.isLocked);
const AUTO_LOCK_TIME = 5 * 60 * 1000;
let resetTimer: any;
resetTimer = () => {
  clearTimeout(resetTimer.id);
  resetTimer.id = setTimeout(() => {
    isLocked.value = true;
    store.commit("setLockStatus", isLocked.value);
  }, AUTO_LOCK_TIME);
};
const unlockFunc = () => {
  isLocked.value = false;
  store.commit("setLockStatus", isLocked.value);
};

let darkTheme = ref(store.state.darkTheme);
const toggleTheme = () => {
  store.commit("setDarkTheme", darkTheme.value);
};
const themeColor = computed(() =>
    !store.state.darkTheme
        ? localStorage.getItem("themeColor") || "rgba(200, 235, 200, 0.3)"
        : localStorage.getItem("themeColorNight") || "rgba(50, 50, 50, 1)"
);
const themeFontColor = computed(() =>
    !store.state.darkTheme ? "black" : "white"
);
const themeBackColor = computed(() =>
    !store.state.darkTheme ? "rgb(255, 255, 255)" : "rgb(50,50,50)"
);
const asideWidth = computed(() => {
  return store.state.isCollapsed ? "100px" : "300px";
});

const currentSession: any = computed(() => store.state.currentSession);

onMounted(() => {
  document.documentElement.style.setProperty(
      "--themeBackColor",
      themeBackColor.value
  );
  document.addEventListener("mousemove", resetTimer);
  document.addEventListener("keypress", resetTimer);
  resetTimer();
});

watch(themeBackColor, (newColor) => {
  document.documentElement.style.setProperty("--themeBackColor", newColor);
});

onUnmounted(() => {
  document.removeEventListener("mousemove", resetTimer);
  document.removeEventListener("keypress", resetTimer);
  clearTimeout(resetTimer.id);
});
</script>

<style scoped>
.dark-back {
  background-color: var(--bb-color);
}

.light-back {
  background-color: var(--w-color);
}

.common-layout,
.el-container {
  width: 100%;
  height: 100%;
}

.left-menu {
  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
  }
}

.floating-button-container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 1000;
  font-size: 14px;
}

:deep(.el-switch__core) {
  background: var(--ml-color);
  border: var(--m-color);
}

:deep(.el-switch.is-checked .el-switch__core) {
  background: var(--mh-color);
  border: var(--m-color);
}
</style>

<style>
.el-popper.is-light,
.el-popper.is-light > .el-popper__arrow:before {
  background: var(--themeBackColor);
  border: none;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: var(--mh-color);
  color: #fff;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: var(--mh-color);
  color: #fff;
}

.el-select-dropdown__item.is-hovering {
  background-color: var(--ml-color);
}

.el-select-dropdown__item.is-selected {
  color: var(--m-color);
}

.el-input__wrapper {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.el-select__wrapper {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--m-color) inset;
}

.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--m-color) inset;
}
</style>
